<template>
    <div>
        <van-dialog 
            v-model="dialogShow" 
            title="新增收货地址" 
            show-cancel-button
            :before-close="onBeforeClose"
            @cancel="cancel"
            @confirm="confirm"
        >   


            <van-form 
                @submit="confirm" 
                v-if="dialogShow" 
                class="form"
                ref="myform"
            >

                <van-field
                    class="def"
                    v-model="form.mailname"
                    name="mailname"
                    placeholder="请输入收货人名称"
                    :rules="[{ required: true, message: '请输入收货人名称' }]"
                />

                <van-field
                    class="def"
                    v-model="form.mailmobile"
                    name="mailmobile"
                    placeholder="请输入收货人手机号"
                    :rules="[{ required: true, message: '请输入收货人手机号' }]"
                />


                <van-field
                    class="def"
					readonly
					clickable
					name="area"
					:value="form.fullName"
					placeholder="请选择省/市/区"
					@click="selectCity"
					:rules="[{ required: true, message: '请选择省/市/区' }]"
				/>
				<van-popup v-model="procitynameshow" position="bottom">
					<van-area
						:area-list="areaList"
						:columns-num="3"
						@confirm="selectCityConfirm($event,'procityname')"
						@cancel="procitynameshow = false"
					/>
				</van-popup>

                <van-field
                    class="def"
                    v-model="form.address"
                    name="address"
                    placeholder="请输入详细地址"
                    :rules="[{ required: true, message: '请输入街道、楼牌号等' }]"
                />

                <van-field 
                    name="switch" 
                    label="是否为默认地址" 
                    label-width="100px"
                >
                    <template #input>
                        <van-switch
                            v-model="form.isdefault" 
                            size="20" 
                            :active-value='1'
                            :inactive-value="0"
                        />
                    </template>
                </van-field>


            </van-form>

        </van-dialog>
    </div>
</template>
<script>
import areaList from '@/js/city.js'
export default {
    props: {
        text:{
            type:String,
            default:'',
        }
    },
    data() {
        return {
            dialogShow:false,

            form:{
                fullName:'',
                isdefault:0,
            },

            procitynameshow:false,

            areaList:areaList,
        }
    },
    watch:{

    },
    methods:{
      
        onBeforeClose(action, done) {
            if (action === "confirm") {
                return done(false);
            } else {
                return done();
            }
        },

        cancel(val){
            this.$emit('close',val);
        },

        confirm(){
            this.$refs["myform"].validate().then(()=>{
                console.log(this.form);
                const loading = this.$loading({});
                this.$api.addmailaddress(this.form).then(res =>{
                    loading.close();
                    this.cancel('refresh');
                    this.$toast.success('添加成功');
                }).catch(err =>{
                    loading.close();
                })
            })
        },
        selectCity(){
			this.procitynameshow = true
		},
		selectCityConfirm($event,type){
            this.form.provincename = $event[0].name;
            this.form.provincecode = $event[0].code;
            
            this.form.cityname = $event[1].name;
            this.form.citycode = $event[1].code;
            
            this.form.countyname = $event[2].name;
            this.form.countycode = $event[2].code;

			this.form.fullName = $event.filter((item) => !!item).map((item) => item.name).join('-');
            this.procitynameshow = false;
		},



    },
    mounted(){
        this.dialogShow= true;
    }
}
</script>
<style lang="less" scoped>

    .form{
        padding:20px 20px;
    }

    /deep/.def .van-field__body {
        padding: 8px 14px;
        border-radius: 5px ;
        border: 1px solid  #e4e4e4 !important;
    }

    /deep/ .van-field__control--custom{
        justify-content: flex-end;
    }

    /deep/ .van-cell::after{
        display: none;
    }

    /deep/ .van-field__error-message{
        padding-left: 14px;
    }

    
</style>